var path = require('path')

//自动把打包的bundle注入到页面底部
var htmlWebpackPlugin = require('html-webpack-plugin')

var VueLoaderPlugin = require('vue-loader/lib/plugin');


//命令行运行 webpack 或 webpack-dev-server时候，灭有提供 打包文件的入口和出口文件，会检查根目录的配置文件
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板文件路径
            filename: 'index.html' //设置生成的内存页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module: { //配置所有第三方loader 规则
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader','sass-loader']
            },
            {
                test: /\.(jpg|png|gif|jpeg|bmp)$/,
                use: 'url-loader？limit=7777&name=[hash:8]-[name].[ext]'
                //limit给定的值是退票的大小byte 小于图片给定的值会转换成base64的值
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
}